import { useState, useEffect } from 'react';

import Taro from '@tarojs/taro';

import { SafeArea, Rate, Overlay } from "@nutui/nutui-react-taro"
import { ScrollView, Image, View, Button } from '@tarojs/components';

import Coord from '@/components/Coord'
import CustomNavBar from '@/components/CustomNavBar'

import { mock } from "@/assets/mock";

import './index.scss'

interface IndexProps { }

const Index: React.FC<IndexProps> = (props) => {

 const [detailData, setDetailData] = useState({} as any);

 const [previewUrl, setPreviewUrl] = useState('' as string)
 const [showPreview, setShowPreview] = useState(false as boolean)
 const [showTransition, setShowTransition] = useState(false as boolean)

 const onScroll = (e) => {
  const { scrollTop } = e.detail
  scrollTop > 100 ? setShowTransition(true) : setShowTransition(false)
 }

 const onClose = () => {
  setShowPreview(false)
 }

 const onHandleShowPreview = (isShow, url) => {
  setShowPreview(isShow)
  setPreviewUrl(url)
 }




 useEffect(() => {
  // 获取路由参数
  const { params } = Taro.getCurrentInstance().router?.params as any;
  const data = JSON.parse(decodeURIComponent(params))
  console.log('data', data);
  if (data) {
   setDetailData(data);
  }
 }, []);

 return (
  <>
   <ScrollView
    scrollY
    style={{ height: '100vh' }}
    enhanced
    showScrollbar={false}
    scrollWithAnimation
    onScroll={onScroll}>
    <CustomNavBar showTransition={showTransition} />
    <Image className='detail-info-header-img' mode="aspectFill" src={detailData?.url} lazyLoad />


    <View className='detail-info-content'>

     <Coord ImageSize='24px' coordName={detailData?.city} />

     <View className='detail-info-content-title'>{detailData?.title}</View>
     <Rate value={Number(detailData?.rate)} allowHalf />
     <View className='detail-info-content-desc'>{detailData?.description}</View>

     <View className='detail-info-content-photos'>景致</View>
     <View className='detail-info-content-photos-list'>
      {
       mock?.photos?.map((item, index) => {
        return <Image
         className='detail-info-content-photos-list-img'
         src={item}
         lazyLoad
         mode='aspectFill'
         onClick={() => onHandleShowPreview(true, item)}
        />
       })
      }
     </View>
    </View>

    <Button className='detail-info-book-tickets-btn' onClick={() => { }}>
     Book tickets
    </Button>

    <Overlay visible={showPreview} onClick={onClose}>
     <Image className='detail-info-preview-img' src={previewUrl} mode='widthFix' />
    </Overlay>

    <SafeArea position="bottom" />
   </ScrollView>
  </>
 );
};

export default Index;
